<template>
  <div style="height: 82vh;">
    <el-container class="wrapper">
      <el-header>
		  <div class="left">
			  <p>芯联科创</p>
		  </div>
		  <el-icon :size="27" style="margin-top: 10px;"><Logo /></el-icon>
		  <div class="middle"> 
		      防返贫数据可视化管理平台
		  </div>
		  <div class="right">
		    <p>{{ currentDate }}</p>
		    <p>{{ currentTime }}</p>
		  </div>
		  <el-link class="logout-btn" :underline="false" @click="logout"><el-icon><Logout /></el-icon></el-link>
	  </el-header>
      <el-container>
        <el-aside width="200px">
			<LjdMenu/>
		</el-aside>
        <el-main>
			<router-view />
		</el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
<script setup>
import LjdMenu from '@/components/menu'
import { ref, onMounted } from 'vue';
import Logout from '@/components/icons/logout'
import Logo from '@/components/icons/logo'
import VueCookie from 'vue-cookie';
import router from '@/router'
import { ElMessage, ElMessageBox } from 'element-plus'
const currentDate = ref('');
const currentTime = ref('');
const updateTime = () => {
  const now = new Date();
  currentDate.value = now.toLocaleDateString(); // 获取日期
  currentTime.value = now.toLocaleTimeString(); // 获取精确到秒的时间
};
onMounted(() => {
  updateTime(); // 页面加载时获取一次时间
  setInterval(updateTime, 1000); // 每秒更新一次时间
});
function logout(){
	ElMessageBox.confirm(
		'确定要退出登录吗',
		'警告',
		{ 
			type:'warning' ,
			confirmButtonText: '确定',
			cancelButtonText: '取消',
		}).then(() => {
		VueCookie.delete('token')
		router.push({
			path:'/'
		})
		ElMessage({
			type:'success',
			message:'退出登录成功'
		})
	}).catch(() => {})
}
</script>
  
<style scoped lang="scss">	
	
$MyBorder: 1px solid #bc0000;
.wrapper {
	height: 100vh;
	overflow: hidden;
}

.el-header {
	border-bottom: $MyBorder;
	display: flex;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #bc0000;
	color: #ffffff;
	line-height: 50px;
	text-align: center;
	font-weight: bold;
	padding-left: 0px;
	.left {
		width: 130px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 1.8rem;
		margin-left: 20px;
		font-family: '华文行楷';
	}
	.middle {
		flex-grow: 1; /* 占据剩余的全部空间 */
		font-size: 2rem;
		letter-spacing: 0.5rem;
		font-family: '仿宋';
	}
	.right {
		width: 200px;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
		font-size: 0.9rem;
		p {
			line-height: 20px;
		}
	}
	.logout-btn {
		width: 80px;
		align-self: center;
		font-weight: bold;
		font-size: 2rem;
		color: #ffffff;
		transition: color 0.3s; 
	}
	.logout-btn:hover {
	  color: #f56c6c; 
	}
}
.el-aside {
	border-right: $MyBorder;
}

</style>